

var page = 0;
var flag = true;
$(window).scroll(function () { 
    if ($(this).scrollTop() <= 0) {
        $('.pageHeader').css("background","transparent");
    } else {
        $('.pageHeader').css("background","#e43130");
    }

    console.log($(window).height(), '<--$(window).height()');
    console.log($(window).scrollTop(), '<--$(window).scrollTop()');
    console.log($(document).height(), '<--$(document).height()');

    if ($(window).height() + $(window).scrollTop() + 50 >= $(document).height() && flag) {
        flag = false;
        page++;
        getProductList(page);
    }
})

// 获取轮播数据第一个模块的
function getLunboData() {
    var html = '';
    $.ajax({
        url: `/mock/lunbo.json`,
        success: function (res) {
            if (res.status) {
                for (var i = 0; i<res.data.length; i++) {
                    html += `<div class="lunbo-wrap-item swiper-slide">
                                <a href="javascript:void(0)">
                                    <img src="${res.data[i].img}" />
                                </a>
                            </div>`;
                }
                $('.lunbo-wrap').html(html);

                //轮播
                new Swiper ('.swiper-container', {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
                    autoplay:true,
                    // 如果需要分页器
                    pagination: {
                    el: '.swiper-pagination',
                    },
                    observeParents: true,
                    observer:true
                }) 
            }
        }
    })
}


/**
 * 首页的第二块轮播
 */
function getAppListData() {
    var html = '';
    var arr = [[]];
    $.ajax({
        url: `/mock/app.json`,
        success:function (res) {
            console.log(res, '<---res');

            

            if (res.status) {
                var j = 0;
                for (var i = 0; i< res.data.length; i++) {
                    
                    arr[j].push(res.data[i])
                    if (i == res.data.length -1) {
                        break;
                    }
                    if ((i+1) % 10 == 0 && i != 0) {
                        arr.push([]);
                        j++;
                    }
                }

                for (var i=0; i< arr.length; i++) {
                    
                    html += '<div class="applist swiper-slide">';
                    for (var j = 0; j< arr[i].length; j++) {
                        html += `<div class="applist-item">
                        <a href="${arr[i][j].link}">
                            <img src="${arr[i][j].img}" />
                            <h3>${arr[i][j].title}</h3>
                        </a>
                    </div>`;
                    }
                    html += '</div>';

                }

                $('.applistwrap').html(html);

                //轮播应用列表
                new Swiper ('.swiper-container-applist', {
                    loop: true, // 循环模式选项
                    // 如果需要分页器
                    pagination: {
                      el: '.swiper-pagination-applist',
                    },
                    observeParents: true,
                    observer:true
                  }) 
            }
            
            // img: "/imgs/jd/index-slider-1.png"
            // link: "jd.com"
            // title: "京东超市"
        }
    })
}



/**
 * 获取滚动加载的数据
 */
function getProductList(p) {
    var html = '';
    $.ajax({
        url: `/mock/productlist.json?page=${p}`,
        success: function (res) {
            
            if (p >= 5) {
                return ;
            }
            console.log(res, 'res-->');
            for(var i = 0; i<res.data.length; i++) {
                html += `<div class="productList-item">
                <div class="productList-item-top">
                    <a href="">
                        <img src="${res.data[i].img}" />
                    </a>
                </div>
                <div class="productList-item-center">
                    <a href="">
                    ${p}${res.data[i].title}
                    </a>
                </div>
                <div class="productList-item-bottom">
                    <div class="price">¥${res.data[i].price}</div>
                    <div class="tag">${res.data[i].tag}</div>
                </div>
            </div>`;
            }

            $('.productList').append(html);
            flag=true;
            
        }
    });
}


//首页的第一块轮播
getLunboData();

//首页第二块轮播 应用列表
getAppListData();
page++;
getProductList(page);
